<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分配管理</el-breadcrumb-item>
      <el-breadcrumb-item>分配列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="grid-content bg-purple-dark">
      <el-button type="primary" size="default" @click="addShow = true">添加角色</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="propss">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-table :data="propss.row.children" border style="width: 100%" :show-header="false">
              <el-table-column prop="id" label="ID" width="140">
                <template slot-scope="props">
                  <el-tag
                    closable
                    @close="rmTagRoles(propss.row.id, props.row.id)"
                  >{{ props.row.authName }}</el-tag>
                  <i class="el-icon-caret-right"></i>
                </template>
              </el-table-column>
              <el-table-column label="ID">
                <template slot-scope="props">
                  <el-table
                    :data="props.row.children"
                    border
                    style="width: 100%"
                    :show-header="false"
                  >
                    <el-table-column>
                      <template slot-scope="props">
                        <el-tag
                          closable
                          type="success"
                          @close="rmTagRoles(propss.row.id, props.row.id)"
                        >{{ props.row.authName }}</el-tag>
                        <i class="el-icon-caret-right"></i>
                        <span v-for="(item, index) in props.row.children" :key="index">
                          <el-tag
                            closable
                            type="warning"
                            @close="rmTagRoles(propss.row.id, item.id)"
                          >{{ item.authName }}</el-tag>
                        </span>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品 ID" prop="id" width="170px"></el-table-column>
      <el-table-column label="商品名称" prop="roleName"></el-table-column>
      <el-table-column label="描述" prop="roleDesc"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="props">
           <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        <el-button type="warning" icon="el-icon-star-off" size="mini" @click="showRights(props.row)">分配角色</el-button>
        </template>
       
      </el-table-column>
    </el-table>

    <!-- 分配权限对话框 -->
    <el-dialog title="提示" :visible.sync="flag" width="30%" center>
        <!--树型列表  -->
     <el-tree :data="treeList" show-checkbox :props="treePorps" node-key="id" default-expand-all :default-expanded-keys="keys"></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="flag = false">取 消</el-button>
        <el-button type="primary" @click="flag = false">确 定</el-button>
      </span>
    </el-dialog>

  
   

    <!-- 添加角色弹出框 -->
    <el-dialog title="添加角色" :visible.sync="addShow">
      <el-form :model="addForm" :rules="rules" ref="addForm">
        <el-form-item label="角色名称" label-width="100px" prop="roleName">
          <el-input v-model="addForm.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" label-width="100px" prop="roleDesc">
          <el-input v-model="addForm.roleDesc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="addShow = false">取 消</el-button>
          <el-button type="primary" @click="addRoles('addForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      tableData: [],
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" }
        ]
      },
      addShow: false,
      addForm: {
        roleName: "",
        roleDesc: ""
      },
      flag: false,
      treeList: [],
      treePorps:{
        children:'children',
        label:'authName'
      },
      keys:[],
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      let url = this.$store.state.baseUrl;
      this.$axios.get(`${url}roles`).then(res => {
        console.log(res);
        this.tableData = res.data;
        if (res.meta == 200) {
          this.$message({
            message: res.meta.msg,
            type: "success"
          });

          this.getTableData();
        } else {
          this.$message.success("获取成功");
        }
      });
    },
    //点击弹出分配权限得对话框
    showRights(role) {
      this.flag = true;
      console.log(role);
      
      // this.getKeys(role)
      let url = this.$store.state.baseUrl;
      this.$axios.get(`${url}rights/tree`).then(res => {
        console.log(res);
        this.treeList = res.data;
        if (res.meta == 200) {
          this.$message({
            message: res.meta.msg,
            type: "success"
          });
          this.showRights();
        } else {
          this.$message.success("11");
        }
      });
    },
    getKeys(node,arr){
      if(!node.children){
        return arr.push(node.id)

      }
      arr.children.forEach(item=>{
        this.getKeys(item,arr)

      })
    }
  },
  computed: {},
  watch: {}
};
</script>

<style lang="scss">
</style>